{% extends "layout.html" %}
{% block title %}{{repo.name|basename}}{%endblock%}
    {% block head_extra %}
		<script type="text/javascript" src="/static/js/ZeroClipboard.min.js"></script>
		<script type="text/javascript" src="http://notifyjs.com/dist/notify-combined.min.js"></script>
	{% endblock %}
	{% block body %}
		{% block repohead %}
			{% from 'modal.macro.html' import render_modal, modal_button %}
			<div class="row">
				<div class="col-md-12">
				<h3>
					{% if not repo.recommend %}
					{% call modal_button('recommend') %}
						<button class="pull-right btn btn-default btn-xs btn-success">
							Recommend to explore
						</button>
					{% endcall %}
					{% endif %}
					<a href="/{{repo.name}}">{{repo.name}}</a>
					<small>Updated {{repo.updated|naturaltime}}</small>
				</h3>
				<hr/>
				<p>{{repo.description}} <a href="https://{{repo.name}}">source</a></p>
				<div class="pull-left">
					<a href="https://{{repo.name}}"><img src="http://img.shields.io/badge/src-github-green.svg?style=flat"></a>
					<a href="https://gowalker.org/{{repo.name}}"><img src="http://img.shields.io/badge/doc-gowalker-blue.svg?style=flat"></a>
					<a href="https://sourcegraph.org/{{repo.name}}"><img src="http://img.shields.io/badge/doc-sourcegraph-blue.svg?style=flat"></a>
					<!--<a href="http://go-search.org/view?id={{repo.name|urlencode}}"><img src="http://go-search.org/badge?id={{repo.name|urlencode}}" alt="GoSearch"></a>-->

					{% call modal_button('badge', 'span') %}
						<img data-toggle="tooltip" data-placement="top"
							title="generate badge"
							src="/badge/{{repo.name}}/downloads.svg"/>
					{% endcall %}

					{% call render_modal('Badge of gobuild', 'badge') %}
						<form role="form">
						<div class="form-group">
							<label>HTML</label>
							<input class="click-select form-control" type="text" value='<a href="http://gobuild.io/{{repo.name}}"><img src="http://gobuild.io/badge/{{repo.name}}/downloads.svg</a>'>
						</div>
						<div class="form-group">
							<label>Markdown</label>
							<input class="click-select form-control" type="text" value='[![Gobuild Download](http://gobuild.io/badge/{{repo.name}}/downloads.svg)](http://gobuild.io/{{repo.name}})'>
						</div>
						<div>
							<a href="http://gobuild.io/{{repo.name}}">
								<img src="/badge/{{repo.name}}/downloads.svg">
							</a>
						</div>
						</form>
					{% endcall %}

					{% call render_modal('Recommand '+repo.name, 'recommend', hidefooter="1") %}
						<form id="form-recommend" action='/api/v1/recommend' method='post' role="form">
							<input type="hidden" name="reponame" value="{{repo.name}}"/>
							<div>
								<p><span style="color:red">Make sure</span>
								you have downloaded and tested</p>
							</div>
							<div class="form-group">
								<label>Category
									<small>If no category found, just type the name</small>
								</label>
								<div class="row">
									<div class="col-md-6">
										<select id="select-category" 
											class="form-control" style="width:60%">
											<option></option>
											{% for c in categorys %}
												<option>{{c}}</option>
											{% endfor %}
										</select>
									</div>
									<div class="col-md-6">
										<input id="input-category" type="text" 
											name="category" class="form-control"
											required placeholder="Category manual">
									</div>
								</div>
							</div>
							<div class="form-group">
								<label>Email address</label>
								<input class="form-control" name="email" type="text" 
									required placeholder='Enter email'>
							</div>
							<div class="form-group">
								<label>Reason</label>
								<textarea placeholder='Why you think this repository is good?'
									name='reason' class="form-control" rows="3" required></textarea>
							</div>
							<button class="btn btn-info" id="btn-recommend">Confirm</button>
						</form>
						<script src="/static/js/jquery.form.js"></script> 
						<script>
							$(function(){
									$("#select-category").change(function(e){
										$("#input-category").val(e.currentTarget.value);
									});
									$("#form-recommend").ajaxForm(function(e){
										alert(e.message);
									});
							});
						</script>
					{% endcall %}

				</div>
				<div class="pull-right" style="margin-bottom: 10px">
					<form class="form-inline" role="form" action='/task/build'>
						<div class="form-group">
							<input type="text" class="form-control" name="tag" value="{%if active_tag%}{{active_tag}}{%else%}branch:master{%endif%}">
							<input type="hidden" name="reponame" value="{{repo.name}}">
							<button class="btn btn-info">Build Now</button>
						</div>
					</form>
				</div>
				<br>
			</div>
		</div>
		{% endblock %}
		{% block info %}
			<div class="row">
				<div class="col-md-4">
					<h4>Labels</h4>
					<div class="list-group">
						{% for build in builds %}
							<a href="/{{repo.name}}?tag={{build.tag}}"
								class="list-group-item
								{%if not build.downloadable%}
								disabled
								{%else%}
								{%if build.tag==active_tag%}active{%endif%}
								{%endif%}
								">
								{%if not build.downloadable%}<del>{%endif%}
								{{build.tag}}
								{%if not build.downloadable%}
								</del>
								{%else%}
								<span class="badge">
								<span class="glyphicon glyphicon-cloud-download"></span> {{build.down_count}}
								</span>
								{%endif%}
							</a>
						{% endfor %}
					</div>
				</div>
				<div class="col-md-8" style="padding: 10px 50px; border-left: 1px solid gray">
					<div class="row">
						<h4>Properties</h4>
						{% if build %}
							<p><span class="glyphicon glyphicon-time"></span> {{ build.updated|strftime }} - [used: {{20|human_duration}}]</p>
							<p>
							{{build.version|str2html}}
							</p>
							<a href="/task/list/{{build.id}}" class="btn btn-info btn-xs">build history</a>
							{% if build.downloadable %}
								<h5>Download</h5>
								<div>
									<table class="table">
										{% for goos, archs in osarchs %}
											<tr>
												<td>
													<button platform="{{goos}}" class="download btn btn-success btn-sm" style="width: 90px; text-align: left">
													<span class="glyphicon glyphicon-save"></span> {{goos}}
													</button>
												</td>
												<td>
													{% for arch in archs %}
														<label class="radio-inline">
															<input type="radio" name="{{goos}}-arch" value="{{arch}}" {% if arch==archs[0]%}checked{%endif%}> {{arch}}
															</label>
														{% endfor %}
													</td>
													<td style="width: 40%">
														<span class="input-group-btn">
															<button class="btn btn-default copy-button" prefix="curl -LO" platform="{{goos}}" type="button">curl</button>
															<button class="btn btn-default copy-button" prefix="wget" platform="{{goos}}" type="button">wget</button>
														</span>
													</td>
												</tr>
											{% endfor %}
										</table>
									</div>
									<div class="well" id="well"></div>
								{% else %}
									<p>
									<strong>Build Status:</strong> {{build.status}}
									</p>
								{% endif %}
							{% else %}
							<p>No history build, you are first here, click <strong>Build Now</strong> to start.
							{% endif %}
						</div>
					</div>
				</div>
				<script type="text/javascript">
				function saveas(url){
					var a = $("<a href='"+url+"'>download</a>").get(0);
					var e = document.createEvent('MouseEvents');
					e.initEvent( 'click', true, true );
					a.dispatchEvent(e);
				}
				var retrive = function(goos, goarch, async, on_success) {
					var setting = {
						url: '/repo/retrive',
						type: 'GET',
						async: async, 
						data: {reponame:"{{repo.name}}", goos: goos, goarch: goarch, tag: "{{active_tag}}"},
						success: function(d){
							console.log("message", d.message);
							var well;
							if (d.status !== 0){
								well = "<span style='color:red'>"+goos+"-"+arch+"\n"+d.message+"</span>";
							} else {
								well = d.well;
							}
							well = well.replace(new RegExp('\n','g'), '<br>');
							$("#well").html(well);
							on_success(d);
						}
					};
					$.ajax(setting);
				}
				$(".download").click(function(e){
						var goos = $(this).attr("platform")
						var xpath = "input[name="+goos+"-arch]:checked";
						var arch = $(xpath).val();
						retrive(goos, arch, false, function(d){
							if (d.status === 0){
								$("#well").prepend('<i>download will start soon.</i> '+
									'if not started click <a href="{0}">link</a><br>'.format(d.outlink));
								saveas(d.outlink);
							}
						});
				});
				var zclient = new ZeroClipboard($(".copy-button"));
				zclient.on("copy", function(event){
						var $this = $(event.target);
						var goos = $this.attr("platform")
						var xpath = "input[name="+goos+"-arch]:checked";
						var arch = $(xpath).val();
						var tag = "{{active_tag}}"
						var clipboard = event.clipboardData;
						retrive(goos, arch, false, function(d){
							var prefix = $this.attr("prefix") || "";
							var suffix = $this.attr("suffix") || "";
							var copydata = prefix + " " + d.outlink + " " + suffix;
							clipboard.setData("text/plain", copydata);
							$this.parent("span").notify("copied to clipboard", 
								{position: "top", className: 'success', autoHideDelay: 1000});
							$("#well").prepend("<code>"+copydata+"</code><br>");
						});
				})
				</script>
			{% endblock %}
			{% block disqus %}
				{% include "disqus.html" %}
			{% endblock %}
		{% endblock %}
